import React from 'react';
import {Form, Row, Col, DatePicker, Input, Select, Button, InputNumber, Collapse} from 'antd';
import {Containerization} from "../common/PublicComponent";
import {
    get_trcsedic,
} from '../actions/rcseRuleMerchantActions';
import RoleBtn from './RoleBtn'

const {RangePicker} = DatePicker;
const Option = Select.Option;
const Panel = Collapse.Panel;
/*
* {
*   name:"",
*   key:"",
*   type:"",
*   initVal:"",
*   disabled:false
* }
*
*
* */
@Form.create()
@Containerization(
    state => ({
        trcseDicData: state.MerchantReducer.trcseDicData,
        tableData: state.MerchantReducer.tableData,
    })
)
export default class Header extends React.Component {
    state = {
        pageNum: 1,
        pageSize: 1,
        total: 0,
    }

    componentWillMount() {
        this.props.data.map((v, k) => {
            if (v.type == 'select') {
                this.handleChange(v.key)
            }
        })

    }

    chooseType(v) {

        switch (v.type) {
            case 'select':
                return <Select>
                    <Option key={'00'}value='all'>全部</Option>
                    {this.props.trcseDicData[v.key] && this.props.trcseDicData[v.key].map((v, k) => {
                        return <Option key={k} value={v.DICCODE}>{v.DICNAME}</Option>
                    })}</Select>
            case 'input':
                return <Input placeholder="请输入" style={{height:'auto'}}/>
            case 'num':
                return <InputNumber></InputNumber>
            case 'multiSelect':
                return <Select/>
            case 'date':
                return <RangePicker format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                />
            default:
                <text>可怜啊</text>
        }
    }

    handleChange = (name) => {
        // console.log(`selected ${value}`);
        this.props.dispatch(get_trcsedic(name)).then(() => {
            // const {data} = this.props.trcseDicData;
            // console.log(data);
        })
    }


    handleSearch = () => {
        this.props.searchData()
    }

    render() {
        const {data = this.headerData, form, permission} = this.props;
        const {getFieldDecorator} = form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 12},
                sm: {span: 12},
                md: {span: 10}
    },
            wrapperCol: {
                xs: {span: 12},
                sm: {span: 12},
                md: {span: 14}
            }
        };
        const layout = {
            xs: 24,
            sm: 12,
            md: 6,
        }
        const customPanelStyle = {
            // background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };
        return (
            <Form className="container" style = {{width: '97.5%',margin: 'auto',marginTop: 20 ,borderRadius : 2}}
                  onSubmit={this.handleSearch}
            >
                <Collapse bordered={false}>
                    <Panel header="查询" style={customPanelStyle}>
                        <Row style={{paddingTop: 30}}>
                            {
                                data.map((v, k) => {
                                    return (
                                        <Col {...layout} key={k} >
                                            <Form.Item {...formItemLayout}
                                                label={(<span>{v.name}</span>)}
                                            >
                                                {
                                                    getFieldDecorator(v.key, {
                                                        initialValue: v.initVal ? v.initVal : null,
                                                        rules: v.rules
                                                    })(this.chooseType(v))
                                                }
                                            </Form.Item>
                                        </Col>
                                    )
                                })
                            }
                            <Col {...layout} style={{float: 'right', textAlign: 'end', marginRight: '1%', marginBottom: 20}}>
                                 <Button type="primary"
                                         onClick={this.handleSearch}
                                         style={{width: 120,marginTop: 2, marginLeft: '4%'}}
                                 >查询</Button>
                            </Col>
                            {/*<Button type="primary" onClick={this.handleSearch} style={{width: 120,marginTop: 2, marginLeft: '4%'}}>查询</Button>*/}
                        </Row>
                    </Panel>
                </Collapse>
            </Form>

        )
    }
}